<template>
    <van-col :span="props?.span ?? 23" class="rightcol">
        <van-card
            v-for="item in props.list"
            :key="item?.id ?? '1'"
            :price="item?.price ?? '1'"
            :desc="item?.detail ?? '月销量1000'"
            :title="item?.product ?? '1'"
            :thumb="'http://localhost:3000/test/pic?img='+item.img_url "
            :origin-price="item?.oldprice ?? '1'"
            @click="toDetail(item.id)"
        >
            <template #num>
                <van-button size="mini" @click.stop="useCart.saveCart(item);Toast('添加成功')"
                    >加入购物车</van-button
                >
            </template>
        </van-card>
    </van-col>
</template>

<script setup lang="ts">
import { useCartStore } from '@/stores/cart'
import { useRouter } from 'vue-router'
import { Toast } from 'vant'
const useCart = useCartStore()
const router = useRouter()
const props = defineProps(['list', 'span'])

const toDetail = id => {
    router.push({ path: '/detail', query: { id } })
}
</script>

<style lang="scss" scoped>
.rightcol {
    width: 100%;
    padding-left: 12px;
    .van-card {
        width: 100%;
        .van-button {
            background-color: rgb(236, 13, 13);
            color: #fff;
            border-radius: 16px;
        }
    }
}
</style>
